<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>押金订单表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top:20px;">
		<legend>查询条件</legend>
	</fieldset>
	<!-- 查询条件开始 -->
	<form action="" class="layui-form" method="post">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">病人编号</label>
				<div class="layui-input-inline">
					<input name="receiptId" class="layui-input" type="text" >
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">订单编号</label>
				<div class="layui-input-inline">
					<input name="payInId" class="layui-input" type="text" >
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label" style="width:130px;">订单日期范围</label>
				<div class="layui-input-inline">
					<input name="note"  type="text" class="layui-input" id="note" >
				</div>
			</div>
			
			<div class="layui-inline">
			    <div class="layui-input-block">
			      <button class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" type="button" id="doSearch" lay-filter="doSearch" lay-submit="">查询</button>
			      <button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" type="reset">重置</button>
			    </div>
			 </div>
			
		</div>
	</form>
	
	<!-- 查询条件结束 -->

	<!-- 数据表格开始 -->
	<table class="layui-hide" id="payInTable" lay-filter="userTable" ></table>
	<div style="display: none;" id="userToolBar">
		<button class="layui-btn layui-btn-danger layui-btn-sm" type="button" lay-event="batchDelete">批量删除</button>
	</div>	
	
	<div style="display: none ;" id="rightToolBar" >
		<button class="layui-btn layui-btn-danger layui-btn-sm" type="button" lay-event=delete>删除</button>
	</div>
	<!-- 数据表格结束 -->

	<script src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'layer', 'form', 'table', 'laydate','laypage'],
				function() {
					var element = layui.element;
					var $ = layui.jquery;
					var layer = layui.layer;
					var form = layui.form;
					var table = layui.table;
					var laydate = layui.laydate;
					//渲染表格
					table.render({
						elem : '#payInTable',
						url : '/payIn/depositSearchDetails',
						title : '押金订单表',
						toolbar : "#userToolBar",
						limits:[10,20,30],
						page : true,
						even: true,
						height: 'full-130',
						skin: 'row',
				        method: "post",
				        contentType: 'application/json',
						cols : [ [
						{type : 'checkbox',fixed : 'left'},
						{field : 'receiptId',title : '病人id'},
						{field : 'payInId',title : '订单id'},
						{field : 'receiptDate',title : '支付日期'},
						{field : 'payInMoney',title : '支付金额'},
						{field : 'payWayId',title : '支付方式',templet:function(data){
							if(data.payWayId=='1'){
								return '支付宝'
							}else if(data.payWayId=='2'){
								return '微信'
							}else if(data.payWayId=='3'){
								return '现金'
							}
								return '错误'
						}},
						{fixed : 'right',align : 'center',toolbar : '#rightToolBar'}
						] ]
					});
					
			        laydate.render({
				          elem: '#note',
				          range:true,
				          min:-60,
				          max:0,
				        });
			        
					//1.头部工具栏事件
					table.on('toolbar(userTable)', function(obj) {
						switch (obj.event) {
						case 'batchDelete':
					        var len = $("input:checked").length;
					        if (len < 1) {
					          layer.msg('请至少选择一项！', { icon: 2 });
					          break;
					        }
							var checkStatus = table.checkStatus(obj.config.id);
							var data = checkStatus.data; //选中行的数组
							var payInId = "";
							$.each(data,function(i,n){
								payInId = payInId+data[i].payInId+",";
							});
							$.get('/payIn/deletePayInDeposit?payInId='+payInId);
							layer.msg('删除成功',{icon:1});
							break;
						}
						;
					});
					
					//5行中工具条事件
					table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						if (layEvent === 'delete') { //删除
							layer.confirm('真的要删除么', function(index) {
								//向服务端发送删除指令
								$.get('/payIn/deletePayInDeposit?payInId='+data.payInId); 
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
								layer.msg('删除成功',{icon:1});
							});
						}
					});
			        
					
					form.on("submit(doSearch)",function(data){
						console.log(JSON.stringify(data.field));
						$.ajax({
							url:'/payIn/depositSearchDetails',
							contentType:'application/json;charset=utf-8',
							type:"post",
							data:JSON.stringify(data.field),
							//获得搜索结果后重新渲染表格
							success:function(res){
								console.log(res);
								table.render({
									elem : '#payInTable',
									data:res.data,
									title : '押金订单表',
									toolbar : "#userToolBar",
									limits:[10,20,30],
									page : true,
									even: true,
							        method: "post",
							        contentType: 'application/json',
									cols : [ [
									{type : 'checkbox',fixed : 'left'},
									{field : 'receiptId',title : '病人id'},
									{field : 'payInId',title : '订单id'},
									{field : 'receiptDate',title : '支付日期'},
									{field : 'payInMoney',title : '支付金额'},
									{field : 'payWayId',title : '支付方式',templet:function(data){
										if(data.payWayId=='1'){
											return '支付宝'
										}else if(data.payWayId=='2'){
											return '微信'
										}else if(data.payWayId=='3'){
											return '现金'
										}
											return '错误'
									}},
									{fixed : 'right',align : 'center',toolbar : '#rightToolBar'}
									] ]
								});
							}
						}); 
						return false;
					});
				});
	</script>
</body>
</html>
